<template>
  <div class="cs-tag">
    <div class="csTagBox" :class="[type, isTagActive]" @click="csTagClick">
      <slot></slot>
    </div>
    <span v-if="isClose" class="csTagCloseBtn" @click="closeTagEvent">×</span>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      require: true,
    },
    id: {
      type: Number | String,
      require: false,
    },
    isClose: {
      type: Boolean,
      default: true,
    },
    isClick: {
      type: Boolean,
      default: false,
    },
    clickIds: {
      type: Array,
      require: false,
    },
  },
  data() {
    return {
      isTagClick: false,
    };
  },
  computed: {
    isTagActive() {
      if (!this.isClick) {
        this.isTagClick = false;
        return "";
      }
      // if (this.isTagClick) {
      //   return "cs-tag-active";
      // } else {
      //   return "";
      // }
      if (this.isClick && this.clickIds.length > 0) {
        if (this.clickIds.indexOf(this.id) !== -1) {
          return "cs-tag-active";
        } else {
          return "";
        }
      }
    },
  },
  methods: {
    closeTagEvent() {
      this.$emit("closeTagEvent");
    },
    csTagClick() {
      // this.isTagClick = !this.isTagClick;
      this.$emit("csTagClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.cs-tag {
  position: relative;
  display: inline-block;
  margin-right: 35px;
}

.csTagBox {
  height: 38px;
  line-height: 24px;
  border: none;
  font-size: 14px;
  box-sizing: border-box;
  padding: 6px 22px;
  border-radius: 2px;
  cursor: pointer;
}

.csTagCloseBtn {
  position: absolute;
  display: inline-block;
  top: -10px;
  right: -8px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  line-height: 16px;
  border-radius: 50%;
  border: 1px solid #006eff;
  text-align: center;
  color: #006eff;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(125, 125, 125, 0.5);
  cursor: pointer;
}

.cs-tag-active {
  color: #fff !important;
  background: #006eff;
}

.plainPrimary {
  border: 1px solid #006eff;
  color: #006eff;
}
</style>
